import { Button, Space } from '@mao-fu/sun-ui';
import React from 'react';
import './align.scss';

const App: React.FC = () => (
  <div>
    <h4>direction: horizontal, display: inline-flex</h4>
    <div className="space-align-container">
      <div className="space-align-block">
        <Space align="center">
          center
          <Button type="primary">Primary</Button>
          <span className="mock-block">Block</span>
        </Space>
      </div>
      <div className="space-align-block">
        <Space align="start">
          start
          <Button type="primary">Primary</Button>
          <span className="mock-block">Block</span>
        </Space>
      </div>
      <div className="space-align-block">
        <Space align="end">
          end
          <Button type="primary">Primary</Button>
          <span className="mock-block">Block</span>
        </Space>
      </div>
      <div className="space-align-block">
        <Space align="baseline">
          baseline
          <Button type="primary">Primary</Button>
          <span className="mock-block">Block</span>
        </Space>
      </div>
    </div>
    <hr></hr>
    <h4>direction: vertical, display: inline-flex</h4>
    <div className="space-align-container">
      <div className="space-align-block">
        <Space direction="vertical" align="center">
          center
          <Button type="primary">Primary</Button>
          <span className="mock-block">B</span>
        </Space>
      </div>
      <div className="space-align-block">
        <Space direction="vertical" align="start">
          start
          <Button type="primary">Primary</Button>
          <span className="mock-block">B</span>
        </Space>
      </div>
      <div className="space-align-block">
        <Space direction="vertical" align="end">
          end
          <Button type="primary">Primary</Button>
          <span className="mock-block">B</span>
        </Space>
      </div>
      <div className="space-align-block">
        <Space direction="vertical" align="baseline">
          baseline
          <Button type="primary">Primary</Button>
          <span className="mock-block">B</span>
        </Space>
      </div>
    </div>
  </div>
);

export default App;
